<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="never" />
    <title>综合案例</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .container {
        width: 1200px;
        margin: 0 auto;
      }

      .video video {
        width: 100%;
        padding: 20px 0;
      }

      .elevator {
        position: fixed;
        top: 280px;
        right: 20px;
        z-index: 999;
        background: #fff;
        border: 1px solid #e4e4e4;
        width: 60px;
      }

      .elevator a {
        display: block;
        padding: 10px;
        text-decoration: none;
        text-align: center;
        color: #999;
      }

      .elevator a.active {
        color: #1286ff;
      }

      .outline {
        padding-bottom: 300px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="header">
        <a href="http://pip.itcast.cn">
          <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
        </a>
      </div>
      <div class="video">
        <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
      </div>
      <div class="elevator">
        <a href="javascript:;" data-ref="video">视频介绍</a>
        <a href="javascript:;" data-ref="intro">课程简介</a>
        <a href="javascript:;" data-ref="outline">评论列表</a>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script>
      const video = document.querySelector('video')
      video.ontimeupdate = _.throttle(() => {
        localStorage.setItem('currentTime', video.currentTime)
      }, 1000)

      video.onloadeddata = () => {
        video.currentTime = localStorage.getItem('currentTime') || 0
      }
    </script>
  </body>
</html>
